<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="content">注册</block></cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">昵称</view>
				<input v-model="form.nick" placeholder="请输入昵称" name="input"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input  v-model="form.account"  placeholder="请输入手机号码" name="input"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input  v-model="form.code"  placeholder="请输入验证码" name="input"></input>
				<button @click="sendCode" class='cu-btn bg-green shadow'>验证码</button>
			</view>
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input  v-model="form.password"  placeholder="请输入密码" name="input"></input>
			</view>

		<view class="cu-bar bg-white margin-top">
		    <view class="action">
		        头像
		    </view>
		</view>
		<view class="cu-form-group">
		    <view class="grid col-4 grid-square flex-sub">
		        <view class="bg-img" @tap="ChooseImage">
		            <image :src="this.form.avatar" ></image>
		            <text class='cuIcon-cameraadd'></text>
		        </view>
		    </view>
		</view>



			<view class="padding flex flex-wrap justify-between align-center bg-white">
			    <button @click="register" style="color: white;background: limegreen;">注册</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				imgList: [],
				form:{
					account:"",
					password:"",
					avatar:"",
					nick:""
				}
			}

		},
		methods: {
			sendCode(){
			    uni.request({
			        url:"http://localhost:10010/user/getCode/"+this.form.account,
			        method:'GET',
			        success:function(res){
			            if(res.data.code==200){
			                uni.showToast({
			                    title: "验证码发送成功",
			                })
			            }
			        }
			    })
			},
			register(){
				uni.request({
				    url:"http://localhost:10010/user/register",
					data:this.form,
				    method:'POST',
				    success:function(res){
				        if(res.data.code==200){
				          uni.showToast({
				              title: "注册成功",
				          });
						  /* 跳转到登陆页面*/
						  uni.navigateTo({
						  	//路径
						  	url: '/pages/signIn/login'
						  });
				        }else{
							uni.showToast({
								title:res.data.msg
							})
						}
				    }
				})
			},
		ChooseImage() {
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album'],
				//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: (res) => {           //成功返回的函数
					// console.log('图片路径为：', res.tempFilePaths[0]) //选着的图片
					console.log(res);
					this.form.avatar = res.tempFilePaths[0];
					uni.uploadFile({ //上传图片
					url: 'http://127.0.0.1:10010/user/uploadOss', //开发者服务器 url
						filePath: this.form.avatar, //要上传文件资源的路径。
						fileType: 'image', //文件类型，image/video/audio
						// name: 'data', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						success: (res) => { //接口调用成功的回调函数
							console.log(res.data);
							this.form.avatar=JSON.parse(res.data).data;
						},
					});
				},
			})
			},
		}
	}
</script>

<style>
.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
